<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>QSKJ_LOCAL</title>
    <script type="text/javascript" src="/Public/Build/Cesium/Cesium.js"></script>
    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <script src="/Public/js/utilsForCesium.js"></script>
    <link rel="stylesheet" href="/Public/Build/Cesium/Widgets/widgets.css">

</head>

<body>
    <div id="cesiumContainer">
        <button id="bt1" style="position: absolute;z-index: 450;">T</button>
    </div>
    <script>


        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MjczNDgzMy1hYzE1LTRjNWYtODZhMS01MjZkNWRiMDc2MmUiLCJpZCI6ODIxMzAsImlhdCI6MTY0NDU0ODc0M30.LpGXXWsbQXucV5MTeC2g8BCAQWiZp612gosWcK-7ocE';

        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(),
        });

        const hpr_0 = new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0)
        const m5 = Cesium.Matrix4.multiplyByTranslation(
            Cesium.Transforms.headingPitchRollToFixedFrame(
                Cesium.Cartesian3.fromDegrees(-105.0, 30),
                hpr_0,
            ),
            new Cesium.Cartesian3(0.0, 0.0, 0.0),
            new Cesium.Matrix4(),
        )

        const mp1 = new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: Cesium.BoxGeometry.fromDimensions({
                    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
                    dimensions: new Cesium.Cartesian3(400000.0, 30000.0, 500000.0),
                }),
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                        Cesium.Color.fromRandom({ alpha: 1.0 }),
                    ),
                },
            }),

            modelMatrix: m5,
            // appearance: new Cesium.MaterialAppearance({
            //     material: new Cesium.Material({
            //         fabric: {
            //             type: "Image",
            //             uniforms: {
            //                 image: "/Public/imgs/lake-bib.png",
            //             },
            //         },
            //     }),
            //     faceForward: true
            // })
              appearance: new Cesium.PerInstanceColorAppearance({
                closed: true,
            }),
        })
        viewer.scene.primitives.add(mp1)

        setInterval(()=>{
            hpr_0.heading += 0.01;
            var mm = Cesium.Matrix4.multiplyByTranslation(
                Cesium.Transforms.headingPitchRollToFixedFrame(
                    Cesium.Cartesian3.fromDegrees(-105.0, 30),
                    hpr_0,
                ),
                new Cesium.Cartesian3(0.0, 0.0, 0.0),
                new Cesium.Matrix4()
            )
            mp1.modelMatrix = mm;
        },5)



        $("#bt1").click(function () {
            hpr_0.heading += 0.1;
            var mm = Cesium.Matrix4.multiplyByTranslation(
                Cesium.Transforms.headingPitchRollToFixedFrame(
                    Cesium.Cartesian3.fromDegrees(-105.0, 30),
                    hpr_0,
                ),
                new Cesium.Cartesian3(0.0, 0.0, 0.0),
                new Cesium.Matrix4()
            )
            mp1.modelMatrix = mm;
        })
        // console.log(mp1)



    </script>
    </div>
</body>

</html>